<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
    computed 与 watch 的区别：

      1. computed 是基于现有的数据通过计算得到一个新的数据用于使用。而 watch 是监听数据的变化去执行一些副作用。

      2. computed 必须有返回值，watch 不需要

      3. computed 不能有副作用

    computed 的应用场景：
      1. 全选反选
      2. 数据筛选
      3. 前端搜索
      4. 数据排序

    watch 的应用场景：
      1. 后端搜索
      2. ...
  
   -->

    <div id="app">
      <input placeholder="请输入电影名字" v-model="keyword" />
      <hr />
      <ul>
        <li v-for="item in list" :Key="item.filmId" style="display: flex">
          <img :src="item.poster" alt="" width="100" />
          <p>{{ item.name }}</p>
        </li>
      </ul>
    </div>

    <script src="../lib/vue3.js"></script>
    <script>
      Vue.createApp({
        data() {
          return {
            keyword: "", // 搜索关键字
            list: [], // 用于存放后端返回的数据
          };
        },

        watch: {
          keyword() {
            clearTimeout(this.timer);

            this.timer = setTimeout(() => {
              this.refresh();
            }, 300);
          },
        },

        methods: {
          refresh() {
            const url = `http://localhost:3000/films?name_like=${this.keyword}`;
            fetch(url)
              .then((response) => response.json())
              .then((result) => {
                console.log("result", result);
                this.list = result;
              });
          },
        },

        created() {
          this.refresh();
        },
      }).mount("#app");
    </script>
  </body>
</html>
